import React from 'react';
import {
    Card, Row, Col, message,
    Form, Checkbox, Tabs, Space,
    Input, InputNumber, Button, Modal,Upload
} from 'antd';
import {
    AlipayOutlined,
    WechatOutlined,
    MailOutlined,
    PhoneOutlined,
    PlusOutlined,
    ImportOutlined,
    CloseOutlined,
    ExclamationCircleOutlined,
    ExportOutlined
} from '@ant-design/icons';
import { connect } from 'umi';
import CateSelect from '@/components/CategoryComponent';
import ZoneSelect from '@/components/ZoneComponent';
import VendorSelect from '@/components/VendorSelect';
import request from '@/utils/request';
import UploadUtil from '@/components/UploadUtil';

const { TabPane } = Tabs;
const { confirm } = Modal;
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};
const apiURL = "/api/services/app/Vendor/";
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            disabled: false,
            visible: false,
            EPay: false,
            dataSource: [],
            record: {},
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
    }
    onFinish = (values: any) => {
        const { data } = this.state;
        var Vendor = values.Vendor;
        Vendor.id = data.id;
        Vendor.vendorNum = data.vendorNum;
        request(apiURL + 'Modify', {
            method: 'POST',
            data: Vendor,
        }).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('保存成功！');
                }
                this.setState({ loading: false });
            }
        });
    }
    newObj = () => {
        var value = {
            vendorID: '0',
            name: '0',
            address1: '0',
            termsCode: '0',
        };
        request(apiURL + 'New', {
            method: 'POST',
            data: value,
        }).then((response) => {
            if (response) {
                console.log(response)
                if (response.success) {
                    message.success('新增成功！');
                    var Vendor = response.result.data;
                    this.setState({ data: Vendor })
                    this.formRef.current.setFieldsValue({ Vendor });
                }
                else {
                    message.error(response.error.message + response.error.details);
                }
                this.setState({ loading: false });
            }
        });
    }
    getObj = (e: any) => {
        if (e.vendorNum) {
            request(apiURL + 'GetByNum', {
                method: 'GET',
                params: { num: e.vendorNum },
            }).then((response) => {
                if (response) {
                    if (response.success) {
                        if (response.result.success) {
                            var data = response.result.data;
                            this.setState({ data });
                            this.formRef.current.setFieldsValue({ Vendor: data });
                        }
                        else {
                            message.error(response.result.message);
                        }
                    }
                    else {
                        message.error(response.error.message);
                    }
                    this.setState({ loading: false });
                }
            });
        }
    }
    delObj = () => {
        const { data } = this.state;
        let _this = this;
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                if (data.items != null && data.items.length > 0) {
                    message.error('含有分录项，不能删除！');
                    return;
                }
                request(apiURL + 'Delete', {
                    method: 'DELETE',
                    params: { id: data.id },
                }).then((response) => {
                    if (response) {
                        if (response.success) {
                            _this.formRef.current.resetFields();
                        } else {
                            message.error(response.error.message);
                        }
                    }
                });
            },
        });
    }
    async handlerExport() {
        this.setState({ loading: true });
        var resp = await request('/api/Excel/ExportVendor', {
            method: 'POST',
            responseType: 'blob',
        });

        var url = window.URL.createObjectURL(resp);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'vendor.xls';
        a.click();
        this.setState({ loading: false });
    }
    handlerImport = (info: any) => {
        if (info.file.status === "done") {
          message.success("导入成功");
          this.setState({ loading: false })
        }
        else {
          this.setState({ loading: true })
        }
      };
    render() {
        return (
            <div>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Space>
                        <Button type="primary" icon={<PlusOutlined />} onClick={() => this.newObj()}>新增</Button>
                        <Button type="primary" htmlType="submit" >保存</Button>
                        <Button type="default" icon={<ExportOutlined />} onClick={() => this.handlerExport()} loading={this.state.loading}>
                            导出
                        </Button>
                        <Upload
                            accept=".xls,.xlsx,application/vnd.ms-excel"
                            name='file'
                            action="/api/Excel/ImportVendor"
                            headers={{
                                Authorization: UploadUtil.accessToken,
                            }}
                            beforeUpload={UploadUtil.checkExcel}
                            showUploadList={false}
                            onChange={this.handlerImport}
                        >
                            <Button icon={<ImportOutlined />} loading={this.state.loading}>导入</Button>
                        </Upload>
                        <Button danger icon={<CloseOutlined />} onClick={() => this.delObj()}>
                            删除
                        </Button>
                    </Space>
                    <Card style={{ marginTop: 8 }}>
                        <Tabs defaultActiveKey="1" >
                            <TabPane tab="明细" key="1">
                                <Row gutter={[16, 16]}>
                                    <Col xs={20} sm={20} md={20} lg={12} xl={12}>
                                        <Form.Item label="供应商序号">
                                            <Input.Group compact>
                                                <VendorSelect
                                                    width={200}
                                                    noStyle
                                                    name={['Vendor', 'vendorNum']}
                                                    rules={[{ required: true, message: "请输入供应商序号" }]}
                                                    disabled
                                                    setCurrent={this.getObj} />
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'vendorID']} label="供应商代码"
                                            rules={[{ required: true }]}>
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'name']} label="供应商名称"
                                            rules={[{ required: true, message: "供应商名称必填" }]}>
                                            <Input />
                                        </Form.Item>
                                        <CateSelect layout="TaxRegion" width={200} required={true} name={['Vendor', 'taxRegionCode']} label="应纳税" />
                                        <CateSelect layout="Terms" width={200} name={['Vendor', 'termsCode']} label="付款条款" />
                                        <CateSelect layout="Currency" width={200} name={['Vendor', 'currencyCode']} label="货币" />
                                        <Form.Item name={['Vendor', 'address1']} label="联系地址"
                                            rules={[{ required: true, message: "联系地址必填" }]}>
                                            <Input.TextArea />
                                        </Form.Item>
                                    </Col>
                                    <Col xs={20} sm={20} md={20} lg={12} xl={12}>
                                        <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['Vendor', 'globalLock']}
                                                    valuePropName="checked">
                                                    <Checkbox>全局锁定</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['Vendor', 'globalVendor']}
                                                    valuePropName="checked">
                                                    <Checkbox>全局供应商</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['Vendor', 'approved']}
                                                    valuePropName="checked">
                                                    <Checkbox>核准</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['Vendor', 'inActive']}
                                                    valuePropName="checked">
                                                    <Checkbox>无效</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'minOrderValue']} label="最少订单量">
                                            <InputNumber min={0} />
                                        </Form.Item>
                                    </Col>
                                </Row>

                            </TabPane>
                            <TabPane tab="联系人" key="3">
                                <Row>
                                    <Col xs={20} sm={20} md={20} lg={12} xl={12}>
                                        
                                        <ZoneSelect layout="Zone" width={100} label="国家/地区" name="Vendor" />

                                        <Form.Item name={['Vendor', 'email']} label="电子邮件">
                                            <Input prefix={<MailOutlined />} />
                                        </Form.Item>

                                    </Col>
                                    <Col xs={20} sm={20} md={20} lg={12} xl={12}>
                                        <Form.Item name={['Vendor', 'contactor']} label="联系人">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'phoneNum']} label="电话">
                                            <Input prefix={<PhoneOutlined />} />
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'mobile']} label="手机">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item name={['Vendor', 'faxNum']} label="传真">
                                            <Input />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </TabPane>
                            <TabPane tab="备注" key="4">
                                <Form.Item
                                    name={['Vendor', 'commentText']} >
                                    <Input.TextArea rows={10} />
                                </Form.Item>
                            </TabPane>
                            <TabPane tab="银行/收款" key="5">
                                <Row>
                                    <Col xs={20} sm={20} md={20} lg={12} xl={12}>
                                        <Form.Item wrapperCol={{ offset: 5 }} style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['Vendor', 'ePay']}
                                                    valuePropName="checked">
                                                    <Checkbox onChange={(e) => { this.setState({ EPay: e.target.checked }); }}>网络支付</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['Vendor', 'inActive']}
                                                    valuePropName="checked">
                                                    <Checkbox>无效</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="银行" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item name={['Vendor', 'bankID']}>
                                                    <Input placeholder="银行代码" disabled={this.state.EPay} />
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'bankName']}>
                                                    <Input placeholder="银行名称" disabled={this.state.EPay} />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="银行账户" name={['Vendor', 'bankAcct']}>
                                            <Input disabled={this.state.EPay} />
                                        </Form.Item>
                                        <Form.Item label="支付宝" name={['Vendor', 'alipayAcct']}>
                                            <Input prefix={<AlipayOutlined />} disabled={!this.state.EPay} />
                                        </Form.Item>
                                        <Form.Item label="微信支付" name={['Vendor', 'wePayAcct']}>
                                            <Input prefix={<WechatOutlined />} disabled={!this.state.EPay} />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </TabPane>
                        </Tabs>

                    </Card>

                </Form>
            </div>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);